<template>
  <view class="page">
    <view class="logo">
      <image src="../../static/logo.png" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info">
      <view class="info">
        <input type="tel" maxlength="11" v-model="form.phone" placeholder="手机号">
        <view class="more"></view>
      </view>
      <view class="info" :style="isLoginWay?'':'display: none'">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo" :class="{phone_right : phoneRight}" @tap="getVerifyCode()" v-if="!countDown">获取验证码</text>
          <text class="mo" v-else>{{countDown}}秒后重试</text>
        </view>
      </view>
      <view class="info" :style="isLoginWay?'display: none':''">
        <input :password='!isPassword' v-model="form.password" maxlength="26" placeholder="请输入密码">
        <view class="more">
          <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
          <text class="mo">忘记密码</text>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn-info">
      <view class="btn" :style="isLogin?'opacity:1':'opacity:0.4'" @click="isLogin?onLogin():''">
        <text>登录</text>
      </view>
    </view>
    <!-- 操作 -->
    <view class="operation">
      <text @click="onLoginCut">{{isLoginWay?'手机号密码登录':'短信验证码登录'}}</text>
      <text @click="onRegister">新用户注册</text>
    </view>
    <!-- 其他方式登录 -->
    <view class="other-ways">
      <text>其他登录方式</text>
    </view>
    <!-- 登录方式 -->
    <view class="login-way">
      <view class="way">
        <image src="/static/wx_ico.png" mode=""></image>
        <text>微信登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapState} from 'vuex'
export default {
  data() {
    return {
      isLogin: false,//是否可以登录
      isLoginWay: false,//登录切换
      isPassword: false,
      // 表单
	  countDown:0,
      form:{
        phone: '',//手机号
        code: '',//验证码
        password: '',//密码
      },
    };
  },
  methods:{
	...mapMutations(['USER_INFO']),
	//获取验证码
	getVerifyCode(){
	    if(this.phoneRight) {
		   this.countDown = 60;
		   this.intervalId = setInterval(() => {
			 this.countDown--;
			 // 判断
			 if (this.countDown === 0) {
			   clearInterval(this.intervalId);
			 }
		   }, 1000);
		   //发送请求
		   this.$api.users.getSend_code().then((res) => {
				console.log(res)
				uni.showToast({
				    title:'验证码' +' '+res.data.message,
				    duration: 5000,
					icon:'none'
				});
		   }).catch((err) => {
				console.log('request fail', err);
		   })
	    }
	},  
    onRegister(){
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    /**
     * 登录切换
     */
    onLoginCut(){
      this.isLoginWay = !this.isLoginWay;
      // 验证码
      if(this.isLoginWay){
        this.isLogin = this.form.code && this.form.phone ? true : false;
      }
      // 账号密码
      if(!this.isLoginWay){
        this.isLogin = this.form.password && this.form.phone ? true : false;
      }
    },
    /**
     * 登录点击
     */
    onLogin(){
		//发送请求
		let data = this.form;
		data.isLoginWay = this.isLoginWay;
		this.$api.users.doLogin({
			data:JSON.stringify(data)
		}).then((res) => {
			console.log(res)
			if(res.data.err_code === 0){
				uni.showToast({
				    title:res.data.message,
				    duration: 2000,
					icon:'none'
				});
			}else{
				let userInfo = res.data[0]
				this.USER_INFO({userInfo})
				uni.showToast({
				    title:'登录成功',
				    duration: 1000,
					icon:'none'
				});
				setTimeout(()=>{
					uni.navigateBack({
					    delta: 1
					});
				},1000)
			}
		}).catch((err) => {
			console.log('request fail', err);
		})
    }
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
        // 验证码
        if(this.isLoginWay){
          this.isLogin = newValue.code && newValue.phone ? true : false;
        }
        // 账号密码
        if(!this.isLoginWay){
          this.isLogin = newValue.password && newValue.phone ? true : false;
        }
      },
      deep: true
    }
  },
  computed: {
  	// 验证手机号是否合理
  	phoneRight() {
  	  return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)
  	}
  }
}
</script>

<style scoped lang="scss">
@import 'login.scss';
</style>
